<!--
  @anthor: darker,
  @description: 表格组件封装,基于elementui的表格再次封装，完全分离表头/表格操作栏/分页工具条、集排序、筛选、显示列于一体
  @date: 2020 / 07 / 27,
  @remark:
 -->
<!--
 引用示例：
 <Qtable :tableData="tableList" :toolBar="toolBar" :tableHead="tableHead"   @event="eventFn" :footer="footer"
  @handler="handler"></Qtable>
  tableList：表格初始化数据 数据格式示例 请看table.js
  toolBar: 自定义操作列
  tableHead: 自定义表头
  @event：操作列回调
  footer：表格底部、控制分页
  indexMethod :分页索引接上上一页的数据
  sortable:true|'custom'|false 自定义列排序
  -->
<template>
  <div class="Q_table_box">
    <el-table
      :data="tableData"
      v-loading="loading"
      :stripe="stripe"
      :border="border"
      :row-class-name="tableRowClassName"
      @selection-change="selectChange"
      @select-all="selectAll"
      @sort-change="sortChange"
      :header-cell-style="headerStyle"
    >
      <el-table-column
        type="selection"
        align="center"
        v-if="selection"
      ></el-table-column>
      <el-table-column
        type="index"
        width="80"
        align="center"
        label="序号"
        :index="indexMethod"
        :fixed="fixedSort"
        v-if="index"
      ></el-table-column>
      <el-table-column
        type="expand"
        align="center"
        label="展开"
        width="50"
        v-if="expand"
      >
        <template slot-scope="scope">
          <slot name="slot-content" :data="{ row: scope.row }"></slot>
        </template>
      </el-table-column>
      <el-table-column
        :header-align="headerAlign"
        :align="headerAlign"
        :show-overflow-tooltip="item.tooltip"
        :prop="item.prop"
        :width="item.width"
        :min-width="item.minWidth"
        :sortable="item.sortOnColumn"
        :sort-method="item.sortFun"
        :fixed="item.fixed"
        :label="item.label"
        v-for="(item, index) in tableHead"
        :key="index"
        v-if="item.isAbled"
      >
        <template slot-scope="scope">
          <div
            :class="item.tooltip ? 'ellipsis-1' : ''"
            :style="{ 'text-align': headerAlign }"
            v-if="!item.define"
          >
            {{ scope.row[item.prop] }}
          </div>
          <div v-else :style="{ 'text-align': headerAlign }">
            <slot
              name="slot"
              :data="{ row: scope.row, prop: item.prop }"
            ></slot>
          </div>
        </template>
      </el-table-column>
      <!-- 操作栏目 -->
      <el-table-column
        header-align="center"
        :fixed="toolBar.fixed"
        label="操作"
        :width="toolBar.width || '100'"
        v-if="JSON.stringify(toolBar) != '{}'"
      >
        <template slot-scope="scope">
          <div
            style="display: flex;align-items: center;justify-content: center;"
          >
            <div class="btns" v-for="(btn, index) in toolBar.btns" :key="index">
              <div
                v-if="!btn.son"
                @click="event(btn.event, scope.$index, scope.row)"
              >
                <i :class="btn.icon"></i>
                <p>{{ btn.label }}</p>
              </div>
              <div v-else>
                <div
                  v-for="(val, key) in btn.son"
                  :key="key"
                  v-if="val.value == scope.row[val.prop]"
                  @click="event(val.event, scope.$index, scope.row)"
                >
                  <i :class="val.icon"></i>
                  <p>{{ val.label }}</p>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- :style="{ 'text-align': footer.align || 'right' }" -->
    <div
      class="pagination"
      v-show="showPagination && footer.total"
      style=" text-align: right"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="footer.current || 1"
        :background="footer.background || false"
        :page-size="footer.pageSize || 10"
        :layout="footer.layout || 'total, sizes, prev, pager, next, jumper'"
        :total="footer.total || 0"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Qtable",
  props: {
    // 表格数据列表
    tableData: {
      type: Array,
      default: []
    },
    headerAlign: {
      type: String,
      default: "left"
    },
    // 多选框开关 是否显示多选框
    selection: {
      type: Boolean,
      default: false
    },
    // 具名插槽
    expand: {
      type: Boolean,
      default: false
    },
    // 索引开关 是否显示索引
    index: {
      type: Boolean,
      default: false
    },
    // ************************* 操作栏目 *************************
    toolBar: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // ************************* 自定义表头 *************************
    tableHead: {
      type: Array,
      default: []
    },
    // *************************分页条设置*************************
    // 分页工具条 位置
    footer: {
      type: Object,
      default: function() {
        return {
          background: true,
          current: 1,
          align: "right",
          pageSize: 10,
          total: 100,
          layout: "total, sizes, prev, pager, next, jumper"
        };
      }
    },
    // 表格加载
    loading: {
      type: Boolean,
      default: false
    },
    //序号固定
    fixedSort: {
      type: String,
      default: ""
    },
    //控制分页器的显示和隐藏  默认显示 true
    showPagination: {
      type: Boolean,
      default: true
    },
    //带斑马纹的表格
    stripe: {
      type: Boolean,
      default: false
    },
    //带边框的表格
    border: {
      type: Boolean,
      default: false
    },
    // header样式
    headerStyle: {
      type: Object,
      default: function() {
        return { background: "#eef1f6", color: "#606266" };
      }
    }
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    // 监听页码变化
    handleSizeChange(e) {
      this.footer.pageSize = e;
      this.footer.current = 1;
      this.$emit("handler", this.footer);
    },
    //监听当前页码
    handleCurrentChange(e) {
      this.footer.current = e;
      this.$emit("handler", this.footer);
    },
    selectAll(e) {
      this.$emit("selectHandle", e);
    },
    selectChange(e) {
      this.$emit("selectHandle", e);
    },
    //分页索引接着上一页的索引
    indexMethod(index) {
      if (JSON.stringify(this.footer) != "{}") {
        return (
          (parseInt(this.footer.current) - 1) * parseInt(this.footer.pageSize) +
          index +
          1
        );
      } else {
        return index + 1;
      }
    },
    // 列排序
    sortChange(obj) {
      console.log("列排序", obj);
    },
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
    },
    event(eve, index, row) {
      let data = {
        event: eve,
        index: index,
        row: row
      };
      this.$emit("event", data);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-table {
  min-height: 320px;
}
.pagination {
  padding-top: 10px;
}
.Q_table_box {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 10px;
  background: #ffffff;
}
/deep/ .el-table td {
  padding: 5px 0 !important;
}

.btns {
  overflow: hidden;
  padding: 0 8px;
  float: left;
}
.btns > div {
  display: flex;
  align-items: center;
}
.btns i {
  display: block;
}
.btns p,
.btns i {
  padding: 8px 0;
  float: left;
  line-height: inherit;
}

.btns:hover {
  color: #e53935;
  cursor: pointer;
}
// 解决切换tab栏或者出现固定列却没有横向滚动条底部出现分隔线的bug
/deep/ .el-table:not(.el-table--scrollable-x) {
  // 没有滚动条时，右边的高度问题
  /deep/ .el-table__fixed-right {
    height: 100% !important;
  }
  /deep/ .el-table__fixed {
    height: 100% !important;
  }
}
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  min-height: 320px;
}

// 统一滚动条的杨样式
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px; // 横向滚动条
  height: 10px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>
